<template>
	<view class="info">
		<view class="uni-padding-wrap idcard">
			<view class="uni-form-item uni-column uni-inline-item">
				<label class="title">审核状态</label>
				<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="get_examine(data.status).label" />
			</view>
			<view class="uni-form-item uni-column uni-inline-item">
				<label class="title">金额</label>
				<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="data.money" />
			</view>
			<view class="label">身份证照片</view>
			<view class="uni-flex uni-row">
				<view class="flex-item idcard_p">
					<img :src="form.idcard_p ? form.idcard_p : 'http://qiniu.landwater.com.cn/idcard_p.jpg'" />
					<button>身份证正面</button>
				</view>
				<view class="flex-item idcard_n">
					<img :src="form.idcard_n ? form.idcard_n : 'http://qiniu.landwater.com.cn/idcard_n.jpg'" />
					<button>身份证反面</button>
				</view>
			</view>
		</view>
		<view class="blank"></view>
		<view class="uni-padding-wrap">
			<view class="label">身份信息:</view>

			<form :data="form">
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">姓名</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.name" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">身份证号</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.idcard" placeholder="请输入身份证号" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">手机号</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.phone" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">备注</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.remark" placeholder="请输入备注信息" />
				</view>
			</form>
		</view>
		<view class="blank"></view>
		<view class="uni-padding-wrap" style="margin: 0 0 80upx 0 ;">
			<view class="label">银行卡信息:</view>

			<form :data="form">
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">开户行</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.open_bank" placeholder="请输入开户行" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">银行卡</label>
					<input disabled="" style="text-align: right;" class="uni-input" v-model.trim="form.bank" placeholder="请输入银行卡号" />
				</view>
				<view class="flex-item bank_thumb">
					<img :src="form.bank_thumb ? form.bank_thumb : 'http://qiniu.landwater.com.cn/bank_thumb.jpg'" />
					<button>银行卡照片</button>
				</view>
			</form>
		</view>

		<view class="unit-foot">
			<button v-if="((data.status == 1 || data.status == 2) && is_manage == 1) || is_manage == 2" class="fr btn success mini-btn" type="" @click="change_money(data.id)">
				修改金额
			</button>
			<button v-if="data.status == 1 || (data.status == 2 && is_manage == 2)" class="fr btn mini-btn" type="primary" @click="examine_pass(data.id)">审核通过</button>
			<button v-if="data.status == 2 || (data.status == 3 && is_manage == 2)" class="fr btn mini-btn" type="warn" @click="examine_fail(data.id)">取消审核</button>
		</view>
		
		<uni-popup ref="dialogInput" type="dialog" @change="change">
			<uni-popup-dialog mode="input" title="修改金额" value="" placeholder="请输入金额" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { get, post, showToast } from '@/static/utils/index';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';

export default {
	components: {uniPopupDialog},
	data() {
		return {
			status: [{ label: '待审核', value: 1 }, { label: '业务员审核通过', value: 2 }, { label: '管理员审核通过', value: 3 }],
			data: {},
			form: {
				idcard_p: '',
				idcard_n: '',
				id: this.$route.query.id,
				name: '',
				idcard: '',
				phone: '',
				bank: '',
				open_bank: '',
				bank_thumb: '',
				remark: ''
			},
			id: 0,
			search: {
				status: 1,
				manager_id: 0
			},
			isShow: false,
			is_manage: 1
		};
	},
	onLoad() {},
	created() {
		this.search.manager_id = localStorage.getItem('manager_id');
		this.is_manage = localStorage.getItem('is_manage');
		this.id = this.$route.query.id;
		this.getDetail();
	},
	methods: {
		change_money(id) {
			this.id = id;
			this.$refs.dialogInput.open();
		},
		change(e) {},
		dialogInputConfirm(done, val) {
			this.$store.dispatch('changeMoney', Object.assign({ id: this.id, money: val }, this.search)).then(res => {
				showToast(res.msg);
				this.getDetail();
			});
			uni.hideLoading();
			// 关闭窗口后，恢复默认内容
			done();
		},
		examine_fail(id) {
			this.$store.dispatch('examineFail', Object.assign({ id: id }, this.search)).then(res => {
				showToast(res.msg);
				this.getDetail();
			});
		},
		examine_pass(id) {
			this.$store.dispatch('examinePass', Object.assign({ id: id }, this.search)).then(res => {
				showToast(res.msg);
				this.getDetail();
			});
		},
		get_examine(status) {
			const examine = this.status.find(item => item.value == status);
			return examine || { value: -2, label: '未知' };
		},
		RadioboxChange: function(e) {
			//单选选中
			//e中可以找到你想要的信息
			this.radio = 1;
		},
		openup() {
			this.$refs.popup.open('top');
		},
		getDetail() {
			this.$store.dispatch('lectureInfoDetail', Object.assign({ id: this.id })).then(res => {
				if (res.code == 200) {
					this.data = res.data;
					this.form = res.data.info;
				}
			});
		}
	}
};
</script>

<style>
.info {
	min-height: 100vh;
	background-color: #ffffff;
}
.label {
	padding-top: 20upx;
	margin-bottom: 20upx;
	font-size: 32upx;
	color: #9c9c9c;
}
.flex-item {
	margin: 10upx;
	width: 50%;
	text-align: center;
	border-radius: 20upx 20upx 0 0;
	overflow: hidden;
	padding-bottom: 20upx;
	cursor: pointer;
}
.idcard_p img,
.idcard_n img,
.bank_thumb img {
	width: 100%;
	height: 100px;
	height: unset;
}
font {
	color: #0066cc;
}
.idcard_p button,
.idcard_n button,
.bank_thumb button {
	background: #5881ff;
	color: #ffffff;
	border-radius: 0 0 20upx 20upx;
	margin-top: -16upx;
	font-size: 32upx;
}
.submit {
	background-color: #5881ff;
}

.flex-item-V {
	width: 100%;
	text-align: center;
	height: 100upx;
}
.blank {
	height: 20upx;
	background-color: #f4f7fe;
}
.uni-form-item {
	border-bottom: 1px solid #ececec;
}
label {
	display: inline;
	vertical-align: middle;
}
.article {
	background-color: #ffffff;
	max-height: 50vh;
	overflow-y: scroll;
	padding: 20upx;
}
.unit-foot {
	height: 88upx;
	padding: 0 20upx;
	border-top: 2upx solid #f5f5f5;
	border-bottom: none;
	line-height: 88upx;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #FFFFFF;
	text-align: center;

	.btn {
		height: 60upx;
		font-size: 28upx;
		line-height: 60upx;
		margin: 14upx 4upx;
	}
}
.success {
	// display: inline-block;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	color: #409eff;
	border: 1px solid #d9ecff;
	border-top-color: rgb(217, 236, 255);
	border-right-color: rgb(217, 236, 255);
	border-bottom-color: rgb(217, 236, 255);
	border-left-color: rgb(217, 236, 255);
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap;
	background-color: #e7faf0;
	border-color: #d0f5e0;
	color: #13ce66;
}
button.success {
	background: #13ce66;
	color: #ffffff;
	border: unset;
}
button {
	margin: 4upx;
}
.danger {
	display: inline-block;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	color: #409eff;
	border: 1px solid #d9ecff;
	border-top-color: rgb(217, 236, 255);
	border-right-color: rgb(217, 236, 255);
	border-bottom-color: rgb(217, 236, 255);
	border-left-color: rgb(217, 236, 255);
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap;
	background-color: #fef0f0;
	border-color: #fde2e2;
	color: #f56c6c;
}
.mini-btn {
	display: inline-block;
	height: 32px;
	padding: 0 10px;
	line-height: 30px;
	font-size: 12px;
	color: #409eff;
	border: 1px solid #d9ecff;
	border-top-color: rgb(217, 236, 255);
	border-right-color: rgb(217, 236, 255);
	border-bottom-color: rgb(217, 236, 255);
	border-left-color: rgb(217, 236, 255);
	border-radius: 4px;
	box-sizing: border-box;
	white-space: nowrap;
	color: #FFFFFF;

}
</style>
